<template>
  <div class="flow" ref="main" style="width: 100%;height:300px; background-color: #FFFFFF;"></div>
</template>

<script>
  import Utils from '@/common/utils/utils'
  export default{
    props:{
      relationVOList:Array
    },
    data(){
      return{
        data:[],

        // 展示数据
        showData:[],
        // 关系数据
        relatData:[]
      }
    },
    mounted() {

    },
    watch:{
      deep:true,
      relationVOList:function(newV,oldV){
        this.data = newV
        // 处理数据
        this.dataDeteil()
        this.initChart()
      }
    },
    methods:{
      dataDeteil(){
        this.data.map(val => {

          // 处理showData
          var obj1 = {
            name: '',
            draggable: true,
          }
          obj1.name = val.entity1

          var obj2 = {
            name: '',
            draggable: true,
          }
          obj2.name = val.entity2

          this.showData.push(obj1)
          this.showData.push(obj2)

          // 处理relatData
          var relatObj = {
            source: '',
            target: '',
            value: ''
          }
          relatObj.source = val.entity1
          relatObj.target = val.entity2
          relatObj.value = val.relation

          this.relatData.push(relatObj)
        })
        // 去除重复
        this.showData = Utils.deteleObject(this.showData)
      },
      initChart(){
        let myChart = this.$echarts.init(this.$refs.main);
          var colors = ["#5793f3", "#d14a61", "#675bba"];
          var option = {
            title: {
                text: ''
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 9
                    },
                }
            },
            series: [

                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 25,
                    focusNodeAdjacency: true,
                    // 加箭头
                    edgeSymbol:['arrow'],
                    // 箭头大小
                    edgeSymbolSize:10,
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                        }
                    },
                    force: {
                        repulsion: 1000
                    },
                    edgeSymbolSize: [4, 50],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                            formatter: "{c}"
                        }
                    },
                    data:this.showData,
                    links: this.relatData,
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1,
                            curveness: 0
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
      },
    }
  }
</script>

<style>
</style>
